<template>
    <modal id="ph-alert" 
    action-align="center" 
    :title="data.title"
    :visible="data.visible"
    :content="data.content" 
    :alpha="false">
        <template  v-slot:action>
            <ph-button :radius="true" type="primary" @click="onClose">{{data.doneText}}</ph-button>
        </template>
    </modal>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import Modal from './base.vue'
import {PhButton} from '../base'
import { PhAlertOpt } from './index.type'

export default defineComponent({
    name:"Alert",
    components:{Modal,PhButton},
    setup(){
        const data = reactive<{
            title?:string,
            visible:boolean,
            content:string,
            doneText?:string
        }>({
            title:"",
            visible:false,
            content:"",
            doneText:"关闭"
        })
        const open = (content:string,title:string,opt:PhAlertOpt={})=> {
            data.title = title
            data.content = content
            data.visible = true
            data.doneText = opt.doneText||data.doneText
        }
        const onClose = ()=>{
            data.visible = false
        }
        return {data,open,onClose}
    },
    
})
</script>
